<template>
	<view class="content">
		<view class="avatarWrapper">
			<view class="avatar">
				<image class="img" src="@/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="number" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="loginBtn" @click="doLogin">
				<text class="btnValue">登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		phoneLogin
	} from "@/api/login.js";
	import {
		userStore
	} from '@/stores/user.js';
	import {
		share
	} from '@/utils/share.js';

	onLoad(() => {
		share();
	})

	const user = userStore();
	const phone = ref('');

	function doLogin() {
		if (phone.value === '') {
			uni.showToast({
				title: '号码错误',
				icon: 'error'
			})
		} else {
			//提交预约数据
			phoneLogin(phone.value).then(res => {
				if (res.code === 200) {
					//保存用户信息到本地
					uni.setStorageSync('user', res.data.user);
					//全局保存
					uni.setStorageSync('token', res.data.token);
					//全局保存
					user.userInfo.value = res.data.user;
					//是否成功登录标志
					uni.setStorageSync('flag', true);
					phone.value = '';
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 200);
				}
			})
		}
	};
</script>

<style scoped lang="scss">
	.content {
		background: #77B3D7;
		width: 100vw;
		height: 100vh;

		.avatarWrapper {
			height: 30vh;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			.avatar {
				width: 150px;
				height: 150px;
				overflow: hidden;

				.img {
					width: 100%;
				}
			}
		}

		.form {
			padding: 0 100upx;
			margin-top: 50px;

			.inputWrapper {
				width: 100%;
				height: 80upx;
				background: white;
				border-radius: 20px;
				box-sizing: border-box;
				padding: 0 20px;
				margin-top: 25px;

				.input {
					width: 100%;
					height: 100%;
					text-align: center;
					font-size: 15px;
				}
			}

			.loginBtn {
				width: 100%;
				height: 88upx;
				background: #2979ff;
				border-radius: 50upx;
				margin-top: 50px;
				display: flex;
				justify-content: center;
				align-items: center;

				.btnValue {
					color: white;
				}
			}
		}
	}
</style>